<style lang="less">
</style>

<template>
    <div>
        <el-form
            :model="queryForm.condition"
            label-width="130px"
            :rules="rules"
            ref="editform"
            label-suffix="："
        >
            <el-row>
                <el-col :span="8">
                    <el-form-item :label="$t('internationalSwitch.projectCategory')" prop="typeId">
                        <el-select
                            v-model="queryForm.condition.typeId"
                            clearable
                            @change="changeChildTypeId(queryForm.condition.typeId)"
                            style="width: 100%"
                        >
                            <el-option
                                v-for="item in options.typeId"
                                :key="item.id"
                                :label="item.typeName"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item
                        :label="$t('internationalSwitch.projectSubcategory')"
                        prop="childTypeId"
                        v-if="this.queryForm.condition.typeId ==2"
                    >
                        <el-select
                            v-model="queryForm.condition.childTypeId"
                            @change="changeProjectId(queryForm.condition.childTypeId)"
                            clearable
                            style="width: 100%"
                        >
                            <el-option
                                v-for="item in options.childTypeId"
                                :key="item.id"
                                :label="item.typeName"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item
                        :label="$t('internationalSwitch.entryName')"
                        prop="projectId"
                        v-show="showProjectFlag"
                    >
                        <el-select
                            v-model="queryForm.condition.projectId"
                            clearable
                            style="width: 100%"
                        >
                            <el-option
                                v-for="item in options.projectId"
                                :key="item.projectId"
                                :label="item.projectName"
                                :value="item.projectId"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item
                        :label="$t('internationalSwitch.startTime') + ':'"
                        prop="startTime"

                    >
                        <el-date-picker
                            style="width: 100%"
                            v-model="queryForm.condition.startTime"
                            type="datetime"
                            format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :placeholder="$t('graduateBase.chooseDateAndTime')"
                            :picker-options="clbssjqPickerOptions"
                        ></el-date-picker>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item
                        :label="$t('internationalSwitch.endTime') + ':'"
                        prop="endTime"
                    >
                        <el-date-picker
                            style="width: 100%"
                            v-model="queryForm.condition.endTime"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            format="yyyy-MM-dd HH:mm:ss"
                            :placeholder="$t('graduateBase.chooseDateAndTime')"
                            :picker-options="clbssjzPickerOptions"
                        ></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-transfer
                        filterable
                        :filter-method="filterMethod"
                        :titles="['未选学院列表', '已选学院列表']"
                        filter-placeholder="请输入学院名称搜索"
                        v-model.trim="queryForm.condition.collegeId"
                        :data="options.faculty"
                        @change="handleChanges"
                    ></el-transfer>
                </el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="end">
                <el-button @click="cancelDialog">{{$t('internationalSwitch.cancel')}}</el-button>
                <el-button type="primary" @click="conserve">{{$t('internationalSwitch.save')}}</el-button>
            </el-row>
        </el-form>

        <el-dialog
            width="25%"
            ref="innerDialog"
            :title="$t('graduateBase.prompt')"
            :visible.sync="innerVisible"
            append-to-body
            :top="'28vh'"
        >
            <div style="text-align: left;margin-bottom: 25px;">{{$t('graduateBase.cancelTip')}}</div>
            <div style="text-align: right;">
                <el-button type="primary" @click="confirmInner">{{$t('common.btn.confirm')}}</el-button>
                <el-button @click="cancelInner">{{$t('common.btn.cancel')}}</el-button>
                <el-button
                    type="primary"
                    @click="confirmAndClose"
                >{{$t('graduateBase.saveAndClose')}}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { queryDic } from 'common/src/api/dictionary'
import UTILS from 'common/src/utils/utils'
import graduateStudent from 'common/src/api/graduateStudent/graduateStudent'
import interAcaConference from 'common/src/api/internationalCommunication/interAcaConference'

export default {
    props: {
        dataList: {
            type: String
        },
        dataProp: {
            type: String
        },
        dataListProp: {
            type: Object
        },
        dataQueryForm: {
            type: Object
        },
        showFlag: {
            type: Boolean
        },
        agent: {
            type: Boolean,
            default: false,
            required: false
        },
        admin: {
            type: Boolean,
            default: false,
            required: false
        }
    },
    data() {
        const generateData = _ => {
            const data = []
            const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都']
            const pinyin = [
                'shanghai',
                'beijing',
                'guangzhou',
                'shenzhen',
                'nanjing',
                'xian',
                'chengdu'
            ]
            cities.forEach((city, index) => {
                data.push({
                    label: city,
                    key: index,
                    pinyin: pinyin[index]
                })
            })
            return data
        }
        return {
            data: generateData(),
            value: [],
            dataList: [],
            queryForm: {
                condition: {
                    collegeId: [],
                    typeId: null,
                    childTypeId: null,
                    projectId: null,
                    projectType: null,
                    startTime: '',
                    endTime: ''
                }
            },
            innerVisible: false,
            showProjectFlag: true,
            id: '',
            restaurants: [],
            formsLearn: [],
            options: {
                faculty: [],
                timeList: [],
                title: [],
                typeId: [],
                childTypeId: [],
                projectId: []
            },
            rules: {
                typeId: [
                    {
                        required: true,
                        message: this.$t('internationalSwitch.pleaseSelectCategory'),
                        trigger: 'change'
                    }
                ],
                childTypeId: [
                    {
                        required: true,
                        message: this.$t('internationalSwitch.pleaseSelectSub'),
                        trigger: 'change'
                    }
                ],
                projectId: [
                    {
                        required: true,
                        message: this.$t('internationalSwitch.pleaseSelectName'),
                        trigger: 'change'
                    }
                ],
                startTime: [
                    {
                        required: true,
                        message: this.$t('internationalSwitch.pleaseSelectStartTime'),
                        trigger: 'change'
                    }
                ],
                endTime: [
                    {
                        required: true,
                        message: this.$t('internationalSwitch.pleaseSelectEndTime'),
                        trigger: 'change'
                    }
                ]
            }

        }
    },
    watch: {
        dataListProp: {
            handler: function(newV, oldV) {
                this.queryForm.condition = JSON.parse(JSON.stringify(this.dataListProp))
            },
            deep: true,
            immediate: true
        },
        showFlag: {
            handler: function(newV, oldV) {
                if (newV === true) {
                    if (this.queryForm.condition.typeId == 2) {
                        interAcaConference
                            .projectTypesSelect({
                                parentId: 2,
                                selectFlag: 0
                            })
                            .then(res => {
                                if (res.code === 200 && res.data.length > 0) {
                                    this.options.childTypeId = res.data
                                    if (this.queryForm.condition.childTypeId == 6) {
                                        this.showProjectFlag = true
                                        interAcaConference
                                            .listProject({
                                                type: 3
                                            })
                                            .then(res => {
                                                if (res.code === 200 && res.data.length > 0) {
                                                    this.options.projectId = res.data
                                                }
                                            })
                                        this.queryForm.condition.projectId = this.dataListProp.projectId
                                    } else {
                                        this.showProjectFlag = false
                                    }
                                }
                            })
                    }

                    if (this.queryForm.condition.typeId == 3) {
                        this.showProjectFlag = true
                        interAcaConference
                            .listProject({
                                type: 2
                            })
                            .then(res => {
                                if (res.code === 200 && res.data.length > 0) {
                                    this.options.projectId = res.data
                                }
                            })
                    } else {
                        this.showProjectFlag = false
                    }
                }
            },
            deep: true
        }
    },
    computed: {
        clbssjqPickerOptions() {
            let _this = this
            return {
                disabledDate: value => {
                    if (_this.queryForm.condition.endTime) {
                        if (
                            value.getTime() >
                            new Date(_this.queryForm.condition.endTime.split(' ')[0]).getTime()
                        ) {
                            return true
                        }
                    }
                    return false
                }
            }
        },
        clbssjzPickerOptions() {
            let _this = this
            return {
                disabledDate: value => {
                    if (_this.queryForm.condition.startTime) {
                        if (
                            value.getTime() + 24 * 60 * 60 * 1000 <
                            new Date(_this.queryForm.condition.startTime.split(' ')[0]).getTime()
                        ) {
                            return true
                        }
                    }
                    return false
                }
            }
        }
    },
    async created() {
        this.changeTypeId()
        this.queryForm.condition = JSON.parse(JSON.stringify(this.dataListProp))
        if (this.queryForm.condition.typeId == 2) {
            interAcaConference
                .projectTypesSelect({
                    parentId: 2,
                    selectFlag: 0
                })
                .then(res => {
                    if (res.code === 200 && res.data.length > 0) {
                        this.options.childTypeId = res.data
                        if (this.queryForm.condition.childTypeId == 6) {
                            interAcaConference
                                .listProject({
                                    type: 3
                                })
                                .then(res => {
                                    if (res.code === 200 && res.data.length > 0) {
                                        this.options.projectId = res.data
                                    }
                                })
                            this.queryForm.condition.projectId = this.dataListProp.projectId
                        } else {
                            this.showProjectFlag = false
                        }
                    }
                })
            this.queryForm.condition.childTypeId = this.dataListProp.childTypeId
        }

        if (this.queryForm.condition.typeId == 3) {
            this.showProjectFlag = true
            interAcaConference
                .listProject({
                    type: 2
                })
                .then(res => {
                    if (res.code === 200 && res.data.length > 0) {
                        this.options.projectId = res.data
                    }
                })
            this.queryForm.condition.projectId = this.dataListProp.projectId
        } else {
            this.showProjectFlag = false
        }
    },
    mounted() {
        this.getOptions()
    },
    methods: {
        filterMethod(query, item) {
            return item.label.indexOf(query) > -1
        },
        // 项目类别
        changeTypeId() {
            interAcaConference
                .projectTypesSelect({
                    selectFlag: 0
                })
                .then(res => {
                    if (res.code === 200 && res.data.length > 0) {
                        this.options.typeId = res.data
                    }
                })
        },
        // 项目类别改变
        changeChildTypeId(value) {
            if (this.queryForm.condition.typeId == 2) {
                this.queryForm.condition.childTypeId = ''
                this.queryForm.condition.projectId = ''
                interAcaConference
                    .projectTypesSelect({
                        parentId: 2,
                        selectFlag: 0
                    })
                    .then(res => {
                        if (res.code === 200 && res.data.length > 0) {
                            this.options.childTypeId = res.data
                        }
                    })
            } else if (this.queryForm.condition.typeId == 3) {
                this.showProjectFlag = true
                this.queryForm.condition.projectId = ''
                this.options.projectId = null
                interAcaConference
                    .listProject({
                        type: 2
                    })
                    .then(res => {
                        if (res.code === 200 && res.data.length > 0) {
                            this.options.projectId = res.data
                        }
                    })
            } else {
                this.showProjectFlag = false
                this.queryForm.condition.projectId = ''
                this.queryForm.condition.childTypeId = ''
            }
        },

        changeProjectId(value) {
            if (this.queryForm.condition.childTypeId == 6) {
                this.showProjectFlag = true
                interAcaConference
                    .listProject({
                        type: 3
                    })
                    .then(res => {
                        if (res.code === 200 && res.data.length > 0) {
                            this.options.projectId = res.data
                        }
                    })
            } else {
                this.showProjectFlag = false
                this.queryForm.condition.projectId = ''
            }
        },
        getOptions() {
            // 筛选条件字典查询
            let data = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: ['profession', 'X_YX']
            }
            queryDic(data).then(res => {
                UTILS.fillSelect(
                    {
                        title: 'profession',
                        faculty: 'X_YX'
                    },
                    res.data,
                    this.options
                )
            })
        },
        // 内层弹出确定
        confirmInner() {
            this.dataListProp = {}
            this.$refs['editform'].resetFields()
            this.queryForm.condition.collegeId = ''
            this.queryForm.condition.typeId = null
            this.queryForm.condition.projectId = null
            this.queryForm.condition.projectType = null
            this.queryForm.condition.startTime = ''
            this.queryForm.condition.endTime = ''
            this.innerVisible = false
            this.$emit('cancel-dialog', false)
        },
        // 内层弹出取消
        cancelInner() {
            this.innerVisible = false
        },
        // 内层弹出保存关闭
        confirmAndClose() {
            this.innerVisible = false
            this.conserve()
        },
        // 取消
        cancelDialog() {
            this.$refs['editform'].resetFields()
            this.$emit('cancel-eidt', false)
        },

        // 保存
        conserve() {
            this.$refs['editform'].validate(valid => {
                if (valid) {
                    if (this.queryForm.condition.startTime > this.queryForm.condition.endTime) {
                        this.$eduAlert(
                            this.$t('internationalSwitch.lessThan'),
                            this.$t('graduateBase.prompt'),
                            {
                                type: 'warning'
                            }
                        )
                        return
                    }
                    this.queryForm.condition.id = this.dataListProp.id
                    if (this.queryForm.condition.collegeId.length > 0) {
                        this.$emit('affirm-edit', this.queryForm.condition, this.dataList)
                    } else {
                        this.$message({
                            type: 'error',
                            message: this.$t('internationalSwitch.pleaseSelectCollege')
                        })
                    }
                } else {
                    if (this.queryForm.condition.startTime > this.queryForm.condition.endTime) {
                        this.$eduAlert(
                            this.$t('internationalSwitch.lessThan'),
                            this.$t('graduateBase.prompt'),
                            {
                                type: 'warning'
                            }
                        )
                        return
                    }
                    this.queryForm.condition.id = this.dataListProp.id

                    if (this.queryForm.condition.collegeId.length > 0) {
                        this.$emit('affirm-edit', this.queryForm.condition, this.dataList)
                    } else {
                        this.$message({
                            type: 'error',
                            message: this.$t('internationalSwitch.pleaseSelectCollege')
                        })
                    }
                }
            })
        }
    }
}
</script>
